<template>
  <div class="execution">
    <basic-container>
      <el-tabs v-model="activeName" @tab-click="handleClickTab">
        <el-tab-pane label="待审核" name="first"></el-tab-pane>
        <el-tab-pane label="已上架" name="second"></el-tab-pane>
        <el-tab-pane label="已驳回" name="fourth"></el-tab-pane>

        <el-card class="filter-container" shadow="never">
          <div style="margin-top: 10px">
            <el-form :inline="true" size="small" label-width="140px">
              <el-form-item label="商品名称：">
                <el-input
                  style="width: 203px"
                  v-model="listQuery.productName"
                  placeholder="商品名称"
                ></el-input>
              </el-form-item>
              <el-form-item label="分类名称：">
                <el-select v-model="listQuery.storeId" placeholder="请选择">
                  <el-cascader
                    clearable
                    change-on-select
                    v-model="selectProductCateValue"
                    :options="productSortOptions"
                    :props="{ emitPath: false }"
                  >
                  </el-cascader>
                </el-select>
              </el-form-item>

              <el-form-item label="店铺名称：">
                <el-select v-model="listQuery.storeId" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.storeId"
                    :label="item.storeName"
                    :value="item.storeId"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item>
                <el-button @click="getList" type="primary" size="small"
                  >查询结果</el-button
                >
                <el-button @click="handleResetSearch" size="small">
                  重置
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>

        <div class="table-container" style="margin-top: 20px">
          <el-table
            border
            :data="list"
            :header-cell-style="{ color: '#4D4D4D', background: '#fafafa' }"
          >
            <el-table-column min-width="120" align="center">
              <template slot-scope="scope">
                <img style="width: 100px; height: 100px" :src="scope.row.pic" />
              </template>
            </el-table-column>
            <el-table-column
              label="商品名称"
              show-overflow-tooltip
              min-width="120"
              prop="title"
              align="center"
            ></el-table-column>

            <el-table-column label="所属店铺" min-width="100" align="center">
              <template slot-scope="scope">
                {{ scope.row.storeName }}
              </template>
            </el-table-column>

            <el-table-column label="库存" min-width="100" align="center">
              <template slot-scope="scope">
                {{ scope.row.stock }}
              </template>
            </el-table-column>

            <el-table-column label="价格" min-width="120" align="center">
              <template slot-scope="scope">
                <p>售价：￥{{ scope.row.price }}</p>
              </template>
            </el-table-column>

            <el-table-column label="商品类型" min-width="100" align="center" prop="productType">
              <template slot-scope="scope">
                {{ scope.row.productType | useproductType }}
              </template>
            </el-table-column>
            <el-table-column label="预售金额"   min-width="100" align="center" prop="useGift">
              <template  slot-scope="scope" v-if="scope.row.productType === 2">
                ￥{{ scope.row.preSaleAmount }}
              </template>
            </el-table-column>
            <el-table-column label="发售时间"  min-width="100" align="center" prop="useGift">
              <template slot-scope="scope" v-if="scope.row.productType === 2">
                {{ scope.row.preSaleTime}}
              </template>
            </el-table-column>
            <el-table-column label="所属分类" min-width="100" align="center">
              <template slot-scope="scope">
                {{ scope.row.oneSort }}/{{ scope.row.twoSort }}
              </template>
            </el-table-column>


            <el-table-column label="品牌" min-width="100" align="center">
              <template slot-scope="scope">
                {{ scope.row.brandName }}
              </template>
            </el-table-column>

            <el-table-column
              label="驳回原因"
              min-width="100"
              align="center"
              v-if="listQuery.status === 4"
            >
              <template slot-scope="scope">
                {{ scope.row.rejectionReason }}
              </template>
            </el-table-column>

            <el-table-column
              label="审核人"
              min-width="100"
              align="center"
              v-if="listQuery.status !== 3"
            >
              <template slot-scope="scope">
                {{ scope.row.examineName }}
              </template>
            </el-table-column>

            <el-table-column label="编辑时间" min-width="100" align="center">
              <template slot-scope="scope">
                <p>{{ scope.row.editTime }}</p>
              </template>
            </el-table-column>

            <el-table-column label="编辑人" min-width="100" align="center">
              <template slot-scope="scope">
                <p>{{ scope.row.editName }}</p>
              </template>
            </el-table-column>

            <el-table-column label="操作" min-width="150">
              <template slot-scope="scope">
                <div>
                  <el-button
                    v-if="listQuery.status === 1"
                    size="small"
                    type="text"
                    @click="handleShelfProduct(scope.$index, scope.row)"
                    plain
                    >下架
                  </el-button>
                  <el-button
                    size="small"
                    @click="handleSeeProduct(scope.$index, scope.row)"
                    type="text"
                    plain
                    >查看
                  </el-button>
                  <el-button
                    v-if="listQuery.status === 3"
                    size="small"
                    type="text"
                    @click="handleExamineProduct(scope.$index, scope.row)"
                    plain
                    >审核
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="pagination-container">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="total, sizes,prev, pager, next,jumper"
            :page-size="listQuery.size"
            :page-sizes="[5, 10, 15]"
            :current-page.sync="listQuery.current"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-tabs>
    </basic-container>
  </div>
</template>

<script>
import { operatePPage, listSalesAttr } from "@/api/pms/index";
import { getStore } from "@/api/rms/rmsstore";

const defaultListQuery = {
  current: 1,
  size: 10,
  status: 3,
  sortId: null,
  productName: null,
};

export default {
  name: "productList",
  data() {
    return {
      activeName: "first",
      // 分类
      selectProductCateValue: [],
      productSortOptions: [],
      options: [],
      listQuery: Object.assign({}, defaultListQuery),
      list: [],
      total: 0,
      tabValueMap: {
        first: 3,
        second: 1,
        fourth: 4,
      },
    };
  },
  created() {
    this.getProductSortList();
    this.getList();
    this.getStoreList();
  },
  watch: {
    selectProductCateValue: function (newValue) {
      if (newValue != null && newValue.length == 2) {
        this.listQuery.sortId = newValue[1];
        this.productCategoryName = this.getCateNameById(this.listQuery.sortId);
      } else {
        this.listQuery.sortId = null;
        this.listQuery.productCategoryName = null;
      }
    },
  },
  filters: {
    useproductType(val) {
      if (val === 1) {
        return "普通";
      } else if (val === 2) {
        return "预售";
      }
    },
  },
  methods: {
    getStoreList() {
      getStore({ status: this.listQuery.status }).then((res) => {
        this.options = res.data.data;
      });
    },
    handleClickTab(tab, event) {
      this.listQuery.status = this.tabValueMap[this.activeName];
      this.listQuery.storeId = "";
      this.listQuery.productName = null;
      this.listQuery.current = 1;
      this.getList();
      this.getProductSortList();
      this.getStoreList();
    },
    getProductSortList() {
      listSalesAttr().then((res) => {
        let list = res.data;
        for (let i = 0; i < list.length; i++) {
          let children = [];
          if (list[i].slist != null && list[i].slist.length > 0) {
            for (let j = 0; j < list[i].slist.length; j++) {
              children.push({
                label: list[i].slist[j].name,
                value: list[i].slist[j].id,
              });
            }
          }
          this.productSortOptions.push({
            label: list[i].name,
            value: list[i].id,
            children: children,
          });
        }
      });
    },
    getList() {
      operatePPage(this.listQuery).then((res) => {
        this.list = res.data.data.records;
        this.total = res.data.data.total;
      });
    },
    handleResetSearch() {
      (this.listQuery = Object.assign({}, defaultListQuery)), this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.getList();
    },
    handleShelfProduct(index, row) {
      this.$router.push({
        path: "/pms/produet/shelf",
        query: { productId: row.id },
      });
    },

    handleExamineProduct(index, row) {
      this.$router.push({
        path: "/pms/produet/examine",
        query: { productId: row.id },
      });
    },
    handleSeeProduct(index, row) {
      this.$router.push({
        path: "/pms/produet/see",
        query: { productId: row.id },
      });
    },
  },
};
</script>


